<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="renderer" content="webkit" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <title>note</title>
    <link rel="stylesheet" type="text/css" href="/static/libs/purecss/pure-1.0.0.min.css" />
    <!--[if lte IE 8]>
        <link rel="stylesheet" href="/static/libs/purecss/grids-responsive-old-ie-min.css">
    <![endif]-->
    <!--[if gt IE 8]><!-->
    <link rel="stylesheet" href="/static/libs/purecss/grids-responsive-min.css">
    <!--<![endif]-->
    <link rel="stylesheet" type="text/css" href="/static/utils/top-menu/custom.css" />
    <style type="text/css">
        .grids-example {
            background: rgb(250, 250, 250);
            margin: 2em auto;
            border-top: 1px solid #ddd;
            border-bottom: 1px solid #ddd;          
            font-family: Consolas, 'Liberation Mono', Courier, monospace;
            text-align: center;                 
        }
        .custom-restricted-width {
            display: inline-block;
            /* width: 10em; */
        }

        .pure-g > div {
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }
        .pure-box:nth-child(2n) {
            background-color: #ccc;
        }
        .pure-box:nth-child(2n+1) {
            background-color: #fa1;
        }

        .content-link {
            position: absolute;
            top: 0;
            right: 0;
            display: block;
            height: 100%;
            width: 20px;
            background: transparent url(/static/img/link-icon.png) no-repeat center center;
            background-size: 20px 20px;
        }
        .link-wrapper {
            border: 1px solid #f00;
            height: 2em;
            margin: 2em 0 1em 0;
            font-weight: 300;
            color: #888;
            position: relative;
        }

        .search-line {
            margin: 1px auto 0 auto;
            position: relative;
        }
        .search-line .search-icon {
            position: absolute;
            right: 13px;
            top: 8px;
            border-radius: 6px;
            z-index: +1;
            padding: 10px;
            display: inline-block;
            background-image: url('/static/img/search-icon-gray.png');
        }
        .search-line .search-icon:hover {
            cursor: pointer;
            background-image: url('/static/img/search-icon-orange.png');
        }
        .search-line .pure-input-rounded {
            width: 98%;
            margin-left: 1%;
            display: block !important;
            padding-right: 36px !important;
        }
        @media only screen and (max-width: 480px) {
            .search-line .pure-input-rounded {
                margin-bottom: 0 !important;
            }
        }
    </style>
</head>
<body>
    <div class="custom-wrapper pure-g" id="menu">
        <div class="pure-u-1 pure-u-md-1-3">
            <div class="pure-menu">
                <a href="javascript:;" class="pure-menu-heading custom-brand">Home</a>
                <a href="javascript:;" class="custom-toggle" id="toggle">
                    <i class="bar"></i>
                    <i class="bar"></i>
                    <i class="bar"></i>
                </a>
            </div>
        </div>
        <div class="pure-u-1 pure-u-md-1-3">
            <div class="pure-menu pure-menu-horizontal custom-can-transform">
                <ul class="pure-menu-list">
                    <li class="pure-menu-item" data-id="blog">
                        <a href="{{ url_for('visit.article') }}" class="pure-menu-link">Blog</a>
                    </li>
                    <li class="pure-menu-item" data-id="about">
                        <a href="#" class="pure-menu-link">About</a>
                    </li>
                    <li class="pure-menu-item" data-id="admin">
                        <a href="{{ url_for('admin.index') }}" class="pure-menu-link">Admin</a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="pure-u-1 pure-u-md-1-3">
            <div class="pure-menu pure-menu-horizontal custom-menu-3 custom-can-transform">
                <ul class="pure-menu-list">
                    <li class="pure-menu-item" data-id="project">
                        <a href="#" class="pure-menu-link">Project</a>
                    </li>
                    <li class="pure-menu-item" data-id="contact">
                        <a href="#" class="pure-menu-link">Contact</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <div class="pure-g">
        <div class="pure-u-1 pure-u-sm-3-5 pure-u-md-16-24 pure-box"> ...content... </div>
        <div class="pure-u-1 pure-u-sm-2-5 pure-u-md-8-24 pure-box">
            <form class="pure-form">
                <div class="search-line">
                    <input type="text" class="pure-input-rounded" placeholder="search" />
                    <span class="search-icon"></span>
                </div>
            </form>
        </div>
    </div>
    <div class="link-wrapper">
        hello world
        <a class="content-link" href="#hello-world"></a>
    </div>

    <script type="text/javascript" src="/static/utils/top-menu/custom.js"></script>
    <script type="text/javascript" src="/static/utils/drop-down.js"></script>
</body>
</html>